<template>
  <div>
     <div>
       <el-divider content-position="left">
         <b style="color: #67C23A">美团到店订单详情查询模块</b>
       </el-divider>

       <el-form :model="queryParams" ref="queryXYForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
         <el-form-item label="订单号" prop="orderNo" >
           <el-input
             v-model="queryParams.orderNo"
             placeholder="请输入订单号"
             clearable
             @keyup.enter.native="handleQuery"
           />
         </el-form-item>

         <el-form-item label="充值账号" prop="mobile">
           <el-input
             v-model="queryParams.mobile"
             placeholder="请输入充值账号"
             clearable
             @keyup.enter.native="handleQuery"
           />
         </el-form-item>

         <el-form-item label="状态" prop="status">
           <el-select v-model="value" placeholder="请选择" label="状态">
             <el-option
               v-for="item in options"
               :key="item.value"
               :label="item.label"
               :value="item.value">
             </el-option>
           </el-select>
         </el-form-item>

         <el-form-item>
           <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
           <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
         </el-form-item>
       </el-form>

       <el-table v-loading="loading" :data="tableData" :row-class-name="tableRowClassName">>
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="订单号" align="center" prop="orderNo"/>
         <el-table-column label="充值账号" align="center" prop="mobile" />
         <el-table-column label="批次号" align="center" prop="couponId" />
         <el-table-column label="卡号" align="center" prop="cardNum" />

         <el-table-column label="订单状态" align="center" prop="status" >
           <template slot-scope="scope">
               <span :style="{ color: getStatusColor(scope.row.status) }">{{statusFormatter(scope.row.status)}}</span>
           </template>
         </el-table-column>

         <el-table-column label="领取日期" align="center" prop="couponDrawDate" />
         <el-table-column label="过期时间" align="center" prop="couponLoseDate" />
         <el-table-column label="核销时间" align="center" prop="verificationTime" />

         <el-table-column label="券名称" align="center" prop="couponName" />
         <el-table-column label="系统消息" align="center" prop="resMsg" />
         <el-table-column label="撤销核销次数" align="center" prop="revocationNum" />
         <el-table-column label="撤销时间" align="center" prop="revocationTime" />
       </el-table>
       <pagination
         v-show="total>0"
         :total="total"
         :page.sync="queryParams.current"
         :limit.sync="queryParams.pageSize"
         @pagination="queryXYFrom"
       />
     </div>

  </div>
</template>
<script>
import axios from 'axios'
export default {

    created() {
      this.queryXYFrom();
    },

  data() {
    return {

      options: [{
        value: '0',
        label: '未使用'
      }, {
        value: '20',
        label: '发券挂起中'
      }, {
        value: '80',
        label: '已使用'
      }, {
        value: '81',
        label: '已作废'
      }, {
        value: '82',
        label: '未生效'
      }, {
        value: '83',
        label: '已过期'
      }],
      value:'',

          // 遮罩层
          loading: true,
          // 是否显示弹出层
          open: false,
          tableData: [],
          total: 0,
          queryParams:{
            current: 1,
            pageSize: 10,
            orderNo:null,
            mobile:null,
            status:null,
          },
          // 显示搜索条件
          showSearch: true,
          title: "",
          // 表单参数
          form: {},

    };
  },

  methods: {
    getStatusColor(status) {
      switch (status) {
        case "0":
          return 'blue';
        case "20":
          return 'red';
        case "80":
          return 'green';
        case "81":
          return '#E6A23C';
        case "82":
          return '#6f3ce6';
        case "83":
          return '#e04924';
      }
    },

    statusFormatter(status) {
      // 根据 cellValue 的值返回相应的中文描述
      switch (status) {
        case "0":
          return '未使用';
        case "20":
          return '发券挂起';
        case "80":
          return '已使用';
        case "81":
          return '已作废';
        case "82":
          return '未生效';
        case "83":
          return '已过期';
      }
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        orderNo: null,
        mobile: null,
        status:null,
      };
      this.xyForm("form");
    },

    handleQuery() {
      this.queryParams.pageNum = 1;
      this.queryParams.status = this.value;
      this.queryXYFrom();
    },
    resetQuery() {
      this.xyForm("queryXYForm");
      this.queryXYFrom();
    },
    queryXYFrom(){
      this.loading = true;
      axios.post('http://47.110.49.47:8071/meituan_order/loadOrder', this.queryParams)
        .then(res => {
          if (res.data.code ==200){
            console.log(res.data.encryptData.data)
            this.tableData = res.data.encryptData.data;
            this.total = res.data.encryptData.total;
          }
          this.loading = false;
          // 根据需要处理响应数据
        })
    },

    tableRowClassName({row, rowIndex}) {
      if (rowIndex%2 === 1) {
        return 'success-row';
      }
      return '';
    },

    xyForm(){
      this.queryParams.orderNo = '';
      this.queryParams.mobile = '';
      this.queryParams.status = '';
      this.value ='';
      this.$refs.queryXYForm.resetFields();
    }
  }
}
</script>
<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
